<!-- 魔方模板：一行四列 -->
<template>
  <div class="row-four-cols">
    <a-row :gutter="imageGutter">
      <a-col class="every-box" @click.prevent="handleClick(0)" :class="(!preview && selected === 0) ? 'ant-col-selected': ''" :span="6">
        <p ref="img0" v-if="!images[0]" >宽度188像素</p>
        <img ref="img0" v-else :src="images[0]" alt="">
      </a-col>
      <a-col class="every-box" @click.prevent="handleClick(1)" :class="(!preview && selected === 1) ? 'ant-col-selected': ''" :span="6">
        <p ref="img1" v-if="!images[1]" >宽度188像素</p>
        <img ref="img1" v-else :src="images[1]" alt="">
      </a-col>
      <a-col class="every-box" @click.prevent="handleClick(2)" :class="(!preview && selected === 2) ? 'ant-col-selected': ''" :span="6">
        <p ref="img2" v-if="!images[2]" >宽度188像素</p>
        <img ref="img2" v-else :src="images[2]" alt="">
      </a-col>
      <a-col class="every-box" @click.prevent="handleClick(3)" :class="(!preview && selected === 3) ? 'ant-col-selected': ''" :span="6">
        <p ref="img3" v-if="!images[3]" >宽度188像素</p>
        <img ref="img3" v-else :src="images[3]" alt="">
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import TemplateMixin from '@/components/Draggable/template/TemplateMixin'

  export default {
    name: 'RowFourCols',
    mixins: [TemplateMixin],
    mounted () {
      const { $refs: { img0, img1, img2, img3 } } = this
      img0.height = img0.width
      img1.height = img1.width
      img2.height = img2.width
      img3.height = img3.width
    }
  }
</script>

<style lang="less" scoped>
  .row-four-cols {
    width: 100%;
    .every-box{
      height: 80px;
    }
    .ant-col {
      background-color: #fff;
      border: 1px solid #ebedf0;
      color: #7d7e80;
      cursor: pointer;
      &.ant-col-selected {
        background: #e0edff;
        border: 1px solid #155bd4;
        color: #155bd4;
      }
      img {
        width: 100%;
        height: 100%;
        border: none;
      }
      p {
        text-align: center;
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
</style>
